<template>
	<div>
		<el-table :data="tableData" :row-class-name="tableRowClassName" border style="width: 100%;font-size:1.1rem">
			<el-table-column prop="id" label="排名" header-align="center" align="center" width="80">
			</el-table-column>
			<el-table-column prop="departmentName" label="部门" header-align="center" align="center" width="200">
			</el-table-column>
			<el-table-column prop="positionName" label="岗位" header-align="center" align="center" width="200">
              </el-table-column>
              <el-table-column prop="levelName" label="级别" header-align="center" align="center" width="200">
              </el-table-column>
			<el-table-column prop="employeeName" header-align="center" align="center" label="姓名">
			</el-table-column>
			<el-table-column prop="parkingNum" header-align="center" align="center" label="车位抵任务">
			</el-table-column>
			<el-table-column prop="dealNum" header-align="center" align="center" label="成交套数">
			</el-table-column>
			<el-table-column prop="totalNum" header-align="center" align="center" label="成交总套数">
			</el-table-column>
			<el-table-column prop="remarks" header-align="center" align="center" label="备注">
			</el-table-column>
		</el-table>
		<el-pagination  @current-change="handleCurrentChange" class="pageCon" :page-size="pageSize" layout="prev, pager, next" :total="total">
		</el-pagination>

	</div>
</template>
<style>
	.pageCon {
		text-align: center;
		padding: 10px 0 20px 0
	}
	
	.el-table .danger-row {
		background: yellow;
		color: red
	}
	
	.titleCon {
		font-size: 20px;
	}
</style>
<script>
	export default {
		methods: {
			handleCurrentChange(index){
    		this.page = index
    		this.solveData(this.tmpTableData)
    	},
			tableRowClassName(row, index) {
//				var self = this
//				if(index === 1) {
//					// return 'info-row';
//				} else if(self.value === '0' && index === 3) {
//					return 'danger-row';
//				}
//				return '';
			},
			fetchData() {
				var url = this.$api.TotalMarketingInfo
            console.log(url)
            var d = {
            	  jianDaoTuan: true,
                beginTime: "2017-09-11",
                endTime: "2017-09-19"
            }
            this.$fetch({
                url,
                method:'post',
                data: this.$qs.stringify(d)
                }).then(resData=>{
                    console.log(resData.data.result)
                    this.tmpTableData = resData.data.result
                    this.solveData(resData.data.result)
                }).catch(err=>{
                    console.log(err)
            });
			},
			solveData(data){
  			if(data.length === 0) return
  			var self = this
  			var pageNum = self.pageSize //page组件上一页多少条
  			var pageSize =Math.ceil(data.length/pageNum) //总页数
  			this.total =  data.length  
  			var sumPageData=[]
  			var a = 0
  			if(pageSize<self.page){
  					self.page = 1
  				}
  			data.forEach((item,index)=>{
  				item.id = index+1
  			})
  			for(var i = 1;i<= pageSize;i++){
  				
  				if(i <= pageSize)
		  				{
			  					var pageArray = data.slice(a,a+pageNum)
			  					var obj = {}
			  							obj.pageArray = pageArray
			  					sumPageData.push(obj)
			  					a = a+pageNum+1
		  			
		  				}
  			}
  			if(self.page === '1'){
                    this.tableData = sumPageData[0].pageArray
  			}else{
  				var d = Number(self.page)
  				this.tableData = sumPageData[d-1].pageArray
  			}
  		},
		},
		created() {
			this.fetchData()
		},
		computed: {
			tableDatas() {
				
			},
		},
		data() {
			return {
				tmpTableData:[],
				value: '0',
				page:1,
				pageSize:10,
				total:0,
				options: [{
					value: '0',
					label: '总排名'
				}, {
					value: '1',
					label: '中层以上排名'
				}, {
					value: '2',
					label: '本月新增'
				}, {
					value: '3',
					label: '尖刀团'
				}],
				tableData: []
			}
		}
	}
</script>